<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页数据')" />
</head>
<body class="gray-bg">
	<section class="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="box-header with-border">
						<h3 class="box-title"></h3>
						<div class="box-tools pull-right">
							<button class="btn btn-box-tool" data-widget="collapse">
								<i class="fa fa-minus"></i>
							</button>
							<button class="btn btn-box-tool" data-widget="remove">
								<i class="fa fa-times"></i>
							</button>
						</div>
					</div>
					<div class="box-body">
						<div class="col-md-12">
							<div class="pull-right display-none" id="backToChinaShow" style="position: relative; z-index: 11;">
								<a class="btn btn-default btn-flat btn-xs" href="javascript:void();" onclick="backToChinaMap();">
					              <i class="fa fa-repeat"></i> 返回全国地图
					            </a>
							</div>
							<div style="height:600px" id="echarts-map-chart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<th:block th:include="include :: footer" />
	<script th:src="@{/plugins/echarts/echarts.min.js}"></script>
	<script>
	$(function(){
		$.modal.loading("正在处理中，请稍后...");
        initChart();

		$.modal.closeLoading();
	});

	var dataChina = [
		{ name: '北京市', value: Math.round(Math.random()*1000) },
       	{ name: '天津市', value: Math.round(Math.random()*1000) },
       	{ name: '上海市', value: Math.round(Math.random()*1000) },
       	{ name: '重庆市', value: Math.round(Math.random()*1000) },
       	{ name: '河北省', value: Math.round(Math.random()*1000) },
       	{ name: '河南省', value: Math.round(Math.random()*1000) },
       	{ name: '云南省', value: Math.round(Math.random()*1000) },
       	{ name: '辽宁省', value: Math.round(Math.random()*1000) },
       	{ name: '黑龙江省', value: Math.round(Math.random()*1000) },
       	{ name: '湖南省', value: Math.round(Math.random()*1000) },
       	{ name: '安徽省', value: Math.round(Math.random()*1000) },
       	{ name: '山东省', value: Math.round(Math.random()*1000) },
       	{ name: '新疆维吾尔自治区', value: Math.round(Math.random()*1000) },
       	{ name: '江苏省', value: Math.round(Math.random()*1000) },
       	{ name: '浙江省', value: Math.round(Math.random()*1000) },
       	{ name: '江西省', value: Math.round(Math.random()*1000) },
       	{ name: '湖北省', value: Math.round(Math.random()*1000) },
       	{ name: '广西壮族自治区', value: Math.round(Math.random()*1000) },
       	{ name: '甘肃省', value: Math.round(Math.random()*1000) },
       	{ name: '山西省', value: Math.round(Math.random()*1000) },
       	{ name: '内蒙古自治区', value: Math.round(Math.random()*1000) },
       	{ name: '陕西省', value: Math.round(Math.random()*1000) },
       	{ name: '吉林省', value: Math.round(Math.random()*1000) },
       	{ name: '福建省', value: Math.round(Math.random()*1000) },
       	{ name: '贵州省', value: Math.round(Math.random()*1000) },
       	{ name: '广东省', value: Math.round(Math.random()*1000) },
       	{ name: '青海省', value: Math.round(Math.random()*1000) },
		{ name: '西藏自治区', value: Math.round(Math.random()*1000) },
       	{ name: '四川省', value: Math.round(Math.random()*1000) },
       	{ name: '宁夏回族自治区', value: Math.round(Math.random()*1000) },
       	{ name: '海南省', value: Math.round(Math.random()*1000) },
       	{ name: '台湾省', value: Math.round(Math.random()*1000) },
       	{ name: '香港特别行政区', value: Math.round(Math.random()*1000) },
       	{ name: '澳门特别行政区', value: Math.round(Math.random()*1000) }
    ];
    
    var dataBeijing = [
    	{ name: "丰台区", value: Math.round(Math.random()*1000) }, 
    	{ name: "大兴区", value: Math.round(Math.random()*1000) },
    	{ name: "东城区", value: Math.round(Math.random()*1000) }, 
    	{ name: "通州区", value: Math.round(Math.random()*1000) }, 
    	{ name: "海淀区", value: Math.round(Math.random()*1000) },
    	{ name: "平谷区", value: Math.round(Math.random()*1000) }, 
    	{ name: "朝阳区", value: Math.round(Math.random()*1000) },
    	{ name: "昌平区", value: Math.round(Math.random()*1000) },
    	{ name: "房山区", value: Math.round(Math.random()*1000) },
    	{ name: "延庆区", value: Math.round(Math.random()*1000) },
    	{ name: "石景山区", value: Math.round(Math.random()*1000) },
    	{ name: "怀柔区", value: Math.round(Math.random()*1000) },
    	{ name: "西城区", value: Math.round(Math.random()*1000) },
    	{ name: "顺义区", value: Math.round(Math.random()*1000) },
    	{ name: "门头沟区", value: Math.round(Math.random()*1000) },
    	{ name: "密云区", value: Math.round(Math.random()*1000) }
    ];
    
    var allAreaJsonMap = {
   		'china': 'china',
		'安徽省': 'anhui',
		'澳门特别行政区': 'aomen',
		'北京市': 'beijing',
		'重庆市': 'chongqing',
		'福建省': 'fujian',
		'甘肃省': 'gansu',
		'广东省': 'guangdong',
		'广西壮族自治区': 'guangxi',
		'贵州省': 'guizhou',
		'海南省': 'hainan',
		'河北省': 'hebei',
		'黑龙江省': 'heilongjiang',
		'河南省': 'henan',
		'湖北省': 'hubei',
		'湖南省': 'hunan',
		'江苏省': 'jiangsu',
		'江西省': 'jiangxi',
		'吉林省': 'jilin',
		'辽宁省': 'liaoning',
		'内蒙古自治区': 'neimenggu',
		'宁夏回族自治区': 'ningxia',
		'青海省': 'qinghai',
		'山东省': 'shandong',
		'上海市': 'shanghai',
		'山西省': 'shanxi',
		'陕西省': 'shanxi1',
		'四川省': 'sichuan',
		'台湾省': 'taiwan',
		'天津市': 'tianjin',
		'香港特别行政区': 'xianggang',
		'新疆维吾尔自治区': 'xinjiang',
		'西藏自治区': 'xizang',
		'云南省': 'yunnan',
		'浙江省': 'zhejiang',
    };
	
	async function initChart() {
        let chart = echarts.init(document.getElementById("echarts-map-chart"));
        let chinaGeoJson = await getGeoJson('china.json');
        initEcharts(chinaGeoJson, 'china', chart, allAreaJsonMap, dataChina);
    }
    
    function initEcharts(areaGeoJson, name, chart, allAreaJsonMap, dataOption) {
    	echarts.registerMap(name, areaGeoJson);
    	var title = "全国地图";
    	if(!(name == "china")) {
    		title = name;		
    	}
    	let option = {
            title: {
                text: title,
                left: 'center',
            },
            tooltip: {
                trigger: 'item',
                formatter: function(data){
                    if(!isNaN(data.value)){
                        return data.name + "："+ data.value + " (人)";
                    } else {
                    	return data.name + "：0 (人)";
                    }
                }
            },
            visualMap: {
            	min: 0,
                max: 1000,
                left: 26,
                bottom: 40,
                showLabel: !0,
                text: ["高", "低"],
                pieces: [
                    { gte: 10000, label: '10000人以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
                    { gte: 1000, lte: 9999, label: '1000-9999人', color: '#3375e4' },
                    { gte: 500, lte: 999, label: '500-999人', color: '#6797ef' },
                    { gte: 100, lte: 499, label: '100-499人', color: '#96b5ef' },
                    { gte: 10, lte: 99, label: '10-99人', color: '#bacae8' },
                    { lte: 9, label: '1-9人', color: '#d1d4da' } 
  				],
  				textStyle: {
					color: '#737373'
				},
                show: !0
            },
            series: [
   				{
   				    type: 'map',
   				 	map: name,
   				    label: {
   				        show: false
   				    },
   				    data: dataOption
   				}
			]
        };
    	chart.setOption(option);
    	
    	// 区域点击事件
    	chart.off("click");
    	chart.on("click", params => {
    		let isProvice = false;
    		let clickRegion;
            for (let index in allAreaJsonMap) {
              if(params.name == index) {
                isProvice = true;
                clickRegion = allAreaJsonMap[index];
              }
            };
            console.log("点击的地方", clickRegion);
            // 渲染省份数据
            if(isProvice) {
            	getGeoJson(clickRegion + '.json').then(regionGeoJson => {
    				initEcharts(regionGeoJson, params.name, chart, allAreaJsonMap, dataBeijing);
    				$("#backToChinaShow").show();
    			}).catch(err => {
    				initEcharts(chinaGeoJson, 'china', chart, allAreaJsonMap, dataChina);
    			});
            }
    	});
    	
    	$(window).resize(chart.resize);
    }
    
	async function getGeoJson(jsonName) {
    	return await $.get('/plugins/echarts/json/' + jsonName, "json");
    }
	
	function backToChinaMap() {
    	initChart();
    	$("#backToChinaShow").hide();
    }
	</script>
</body>
</html>
